<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css" />
	<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
	<style type="text/css">

		:root {
			--offset: 25px;
		}

		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body {
			justify-content: center;
			align-items: center;
			min-height: 100vh;
		}

		#app{
			background: #f1f1f1;
			padding: 80px 0;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			text-align: center;
		}

		h1 {
			font-family: "Monoton";
			font-weight: 400;
			letter-spacing: 10px;
			text-transform: uppercase;
			font-size: 35px;
		}

		.mask {
			height: 200px;
			position: relative;
			overflow: hidden;
			margin-top: var(--offset);
		}

		.mask div {
			display: block;
			box-sizing: border-box;
			position: absolute;
			top: 200px;
			padding-bottom: var(--offset);

			background-size: 100% 100%;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-repeat: no-repeat;
		}

		.mask div[data-show] {
			transform: translateY(-100%);
			transition: .5s transform ease-in-out;
		}

		.mask div[data-up] {
			transform: translateY(-400%);
			transition: .5s transform ease-in-out;
		}

		.mask div{
			background-image: linear-gradient(45deg, #5c5c5c 50%, #919191);
		}

		.show{
			width: 100%;
			text-transform: uppercase;
		}

		.show span{
			font-size: 25px;
		}

		.show p{
			margin: 0 auto;
			max-width: 800px;
			font-size: 20px;
			padding-top: 20px;
		}

		.show span,p{
			font-family: 萝莉体;
		}


	</style>
</head>
<body>

<div id="app">
	<h1>Nutrition</h1>
	<div class="mask" onmouseover="stop()" onmouseout="pass()">
		<div class="show" v-for="(nutrition, index) in nutritionList" v-if="index == 0" data-show>
			<span class="description" v-text="'营养百科之' + nutrition.title"></span>
			<p v-text="nutrition.content"></p>
		</div>
		<div class="show" v-for="(nutrition, index) in nutritionList" v-if="index != 0">
			<span class="description" v-text="'营养百科之' + nutrition.title"></span>
			<p v-text="nutrition.content"></p>
		</div>
	</div>
</div>


<script>
	var isContinue = true;
	function stop() {
		this.isContinue = false;
	};
	function pass() {
		this.isContinue = true;
	};
	var app = new Vue({
		el: "#app",
		data: {
			nutritionList: [],
			firstNutrition: ''
			//
		},
		methods: {
			initNutrition(){
				let _this = this;
				$.get("/nutrition/all",function (data){
					_this.nutritionList = data;
					_this.firstNutrition = data[0]
				})
			}
		},
		created(){
			this.initNutrition();
		}
	});
	setInterval(function () {
		if(isContinue) {
			const show = document.querySelector('div[data-show]')
			const next = show.nextElementSibling || document.querySelector('.mask>div')
			const up = document.querySelector('div[data-up]')

			if (up) {
				up.removeAttribute('data-up')
			}

			show.removeAttribute('data-show')
			show.setAttribute('data-up', '')

			next.setAttribute('data-show', '')
		}

	}, 2000);
</script>

<script>



</script>


</body>
</html>